<template>
	<u-tabbar 
	:value="curr" 
	:border="false" 
	activeColor="#000" 
	inactiveColor="#000"
	@change="changeNav">
		<block v-for="(item,index) in list" :key="index">
			<u-tabbar-item :text="item.title" @click="toPage(item.url)">
				<image
					class="ico"
					slot="active-icon"
					:src="item.a_ico"
				></image>
				<image
					class="ico"
					slot="inactive-icon"
					:src="item.ico"
				></image>
			</u-tabbar-item>
		</block>
	</u-tabbar>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	export default {
		name:"Nav",
		mixins:[mixin],
		props:{
			curr:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				list:[
					{
						a_ico:require('@/static/ico/icon/home_s.png'),
						ico:require('@/static/ico/icon/home.png'),
						url:'/pages/Index/index',
						title:'首页'
					},
					{
						a_ico:require('@/static/ico/icon/market_s.png'),
						ico:require('@/static/ico/icon/market.png'),
						url:'/pages/shop/index',
						title:'市场'
					},
					{
						a_ico:require('@/static/ico/icon/mine_s.png'),
						ico:require('@/static/ico/icon/mine.png'),
						url:'/pages/Mine/index',
						title:'我的'
					},
				]
			};
		},
		methods:{
			changeNav(name){
				console.log('[切换]',name)
			},
			toPage(url){
				uni.switchTab({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss">
	.ico{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}
	
	::v-deep .u-tabbar-item__text{
		font-size: 24rpx;
	}
</style>
